<template>
	<div id="resultPage">
		<el-breadcrumb separator-class="el-icon-arrow-right" class="myBreadcrumb">
			<el-breadcrumb-item :to="{ path: '/pedigree' }">谱系分析服务</el-breadcrumb-item>
			<el-breadcrumb-item>结果页</el-breadcrumb-item>
		</el-breadcrumb>
		<el-row :gutter="20">
			<el-col :span="7">
				<el-card class="box-card" shadow="hover">
					<h2>历史分析结果</h2>
					<el-table
						class="resulttable"
						ref="multipleTable"
						:data="inputRemoteTable"
						style="width: 100%"
						height="700"
						@select="select"
						@row-click="rowClick"
						@selection-change="selectionChange"
						stripe
					>
						<el-table-column type="selection"></el-table-column>
						<el-table-column prop="num" label="文件名称"> </el-table-column>
						<el-table-column prop="type" label="文件类型"> </el-table-column>
					</el-table>
				</el-card>
			</el-col>

			<el-col :span="17">
				<el-card class="box-card" shadow="hover">
					<el-header class="fileinfo">
						<el-row>
							<el-col :xs="8" :sm="12">
								<label class="fileinfolab">导入文件名称：</label>
								<span class="fileinfospan">{{ selectData.name }}</span>
							</el-col>
							<el-col :xs="8" :sm="12">
								<label class="fileinfolab">文件类型：</label>
								<span class="fileinfospan">{{ selectData.type }}</span>
							</el-col>
						</el-row>
						<el-tabs v-model="activeName" @tab-click="handleClick" ref="tabs">
							<el-tab-pane label="图像化特征" name="third" v-if="selectData.type == '工具集流量特征分析'">
								<div class="third">
									<!-- <img src="../assets/time_line.png" alt="">
                  <img src="../assets/tcp_line.png" alt=""> -->
									<viewer :images="imgList">
										<img v-for="(item, i) in imgList" :key="i" :src="item" alt="" />
									</viewer>
								</div>
							</el-tab-pane>

							<el-tab-pane label="图像化特征(分析输出二)" name="fourth" v-if="selectData.type == '工具集流量图片化'">
								<el-form :model="firstInfo" label-width="160px" class="demo-ruleForm">
									<el-form-item label="源代码特征分析结果："></el-form-item>
									<div class="fourth">
										<viewer :images="firstInfo.imgs">
											<img v-for="(item, i) in firstInfo.imgs" class="first-img" :key="i" :src="item" alt="" />
										</viewer>
									</div>
								</el-form>
							</el-tab-pane>

							<el-tab-pane label="关联分析特征" name="fifth" v-if="selectData.type == '工具集流量特征分析'">
								<h3>匹配到各个规则数量</h3>
								<el-table class="display-table" :data="fifthInfo.rule" border style="width: 100%" stripe>
									<el-table-column prop="num" width="80" align="center" label="序号">
										<template slot-scope="scope">
											<span>{{ scope.$index + 1 }}</span>
										</template>
									</el-table-column>
									<el-table-column prop="name" align="center" label="预测结果"> </el-table-column>
									<el-table-column prop="count" align="center" label="匹配数量"> </el-table-column>
								</el-table>
								<h3>匹配到IP次数</h3>
								<el-table class="display-table" :data="fifthInfo.ips" border style="width: 100%" stripe>
									<el-table-column prop="num" width="80" align="center" label="序号">
										<template slot-scope="scope">
											<span>{{ scope.$index + 1 }}</span>
										</template>
									</el-table-column>
									<el-table-column prop="ip" align="center" label="IP"> </el-table-column>
									<el-table-column prop="count" align="center" label="匹配数量"> </el-table-column>
								</el-table>
							</el-tab-pane>
							<el-tab-pane label="分析结果" name="sixth" v-if="selectData.type == '工具集代码特征分析'">
								<div class="sixth">
									<h3>预测类型:{{ sixthInfo.name }}</h3>
									<h3 class="mt10">匹配到各个类别规则的次数</h3>
									<el-table class="display-table" :data="sixthInfo.ips" border style="width: 100%" stripe>
										<el-table-column prop="num" width="80" align="center" label="序号">
											<template slot-scope="scope">
												<span>{{ scope.$index + 1 }}</span>
											</template>
										</el-table-column>
										<el-table-column prop="name" align="center" label="预测类型"> </el-table-column>
										<el-table-column prop="count" align="center" label="匹配数量"> </el-table-column>
									</el-table>
								</div>
							</el-tab-pane>
						</el-tabs>
					</el-header>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
<script>
export default {
	data() {
		return {
			//右侧文件绑定数据
			selectData: {
				name: '',
				num: '',
				type: '',
				time: '',
			},
			selectTableData: [],
			inputRemoteTable: [
				// {
				//   name: '001',
				//   type: '数据',
				// }, {
				//   name: '002',
				//   type: '文本',
				// }, {
				//   name: '003',
				//   type: '字典',
				// },{
				//   name: '004',
				//   type: '数组',
				// },
			],
			// 标签页绑定信息
			activeName: '',
			firstInfo: {
				imgs: [],
			},
			sixthInfo: {
				name: '预测类型',
				ips: [],
			},
			fifthInfo: {
				rule: [],
				ips: [],
			},
			listData: [],
			imgList: [],
			rpUrl: '',
		}
	},
	watch: {
		selectTableData: function(val) {
			// this.getDetail()
		},
	},
	async mounted() {
		let data = await this.$api.getHistory()
		this.inputRemoteTable = data.data
	},
	methods: {
		select(selection, row) {
			this.rowClick(row)
		},
		// 表格的选中 可以获得当前选中的数据
		selectionChange(val) {
			// 将选中的数据存储起来
			this.selectTableData = val
			this.getDetail()
		},
		// 表格某一行的单击事件
		rowClick(row) {
			const selectTableData = this.selectTableData
			this.$refs.multipleTable.clearSelection()
			if (selectTableData.length == 1) {
				selectTableData.forEach((item) => {
					// 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中
					if (item == row) {
						this.$refs.multipleTable.toggleRowSelection(row, false)
					}
					// 不然就让当前的一行勾选
					else {
						this.$refs.multipleTable.toggleRowSelection(row, true)
					}
				})
			} else {
				this.$refs.multipleTable.toggleRowSelection(row, true)
			}
		},
		handleClick() {},

		//展示selectedData
		async getDetail() {
			const len = this.selectTableData.length
			this.selectData = this.selectTableData[len - 1]
			this.selectData.name = Array.isArray(this.selectData.name) ? this.selectData.name[0] : this.selectData.name
			const num = this.selectData.num
			if (num) {
				let res = (await this.$api.getHistoryByNum(num)) || {}
				if (res.status === 200) {
					console.log(res)
					if (this.selectData.type === '工具集流量特征分析') {
						this.getfifthInfo(res.data)
						this.activeName = 'third'
					}
					if (this.selectData.type === '工具集代码特征分析') {
						this.getCodeFeature(res.data)
						this.activeName = 'sixth'
					}
					if (this.selectData.type === '工具集流量图片化') {
						this.getImgs(res.data)
						this.activeName = 'fourth'
					}
				}
			}
		},
		//工具集流量图片化
		getImgs(data) {
			data.forEach((el) => {
				let imgBase64 = `data:image/png;base64,${el}`

				this.firstInfo.imgs.push(imgBase64)
			})
		},
		//工具集代码特征分析
		getCodeFeature(data) {
			this.sixthInfo.name = data[0]

			let tmp2 = data[1]
			let result = []
			if (tmp2.length == 1) {
				result = [{ name: tmp2[0], count: 1 }]
			}
			//
			for (let index = 0; index < tmp2.length; index++) {
				const name = tmp2[index]
				console.log(name)
				if (result.length >= 1) {
					for (let j = 0; j < result.length; j++) {
						const tmpData = result[j]
						if (tmpData.name !== name) {
							result.push({ name: name, count: 1 })
						} else {
							result[j].count++
						}
					}
				} else {
					result.push({ name: name, count: 1 })
				}
			}
			this.sixthInfo.ips = result
		},
		//工具集流量特征分析
		getfifthInfo(data) {
			let arrTmp = data[0]
			for (const key in arrTmp) {
				if (Object.hasOwnProperty.call(arrTmp, key)) {
					let json = {
						name: key,
						count: arrTmp[key],
					}
					this.fifthInfo.rule.push(json)
				}
			}

			let tmp2 = data[1]
			for (const key in tmp2) {
				if (Object.hasOwnProperty.call(tmp2, key)) {
					let json = {
						ip: key,
						count: tmp2[key],
					}
					this.fifthInfo.ips.push(json)
				}
			}

			this.imgList = []
			data[2].forEach((el) => {
				let imgBase64 = `data:image/png;base64,${el}`

				this.imgList.push(imgBase64)
			})
		},
	},
}
</script>
<style scoped>
#resultPage {
	padding: 20px;
}
#resultPage .myBreadcrumb {
	margin-bottom: 20px;
}
#resultPage .fileinfo .fileinfolab {
	display: inline-block;
	font-size: 16px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(102, 102, 102, 1);
	line-height: 60px;
}
#resultPage .fileinfo .fileinfospan {
	display: inline-block;
	margin-left: 20px;
	font-size: 18px;
	font-weight: 800;
	color: rgb(39, 39, 39);
	line-height: 60px;
}
#resultPage .first-header {
	margin: 20px;
	display: flex;
}
#resultPage .fourth {
	display: flex;
	justify-content: space-between;
	padding: 0px 20px 0px 20px;
}
#resultPage .third {
	width: 1200px;
	overflow-y: auto;
}
.first-img {
	width: 150px;
	height: 150px;
	margin-right: 30px;
}
#resultPage .third img {
	width: 45%;
	height: 300px;
}

#mainIframe {
	width: 1200px;
	height: 600px;
}
.display-table {
	margin: 20px;
}
</style>

<style>
#resultPage .resulttable .el-table__header-wrapper .cell .el-checkbox {
	display: none !important;
}
#resultPage .resulttable .el-table__header-wrapper .cell {
	color: rgba(0, 0, 0, 0.85);
	font-family: PingFangSC-Medium, PingFang SC;
	font-size: 15px;
}
#resultPage .el-card {
	height: 770px;
	overflow: auto;
}
#resultPage .fileinfo .el-row {
	height: 100%;
	margin-bottom: 20px;
}
#resultPage .el-form-item__label {
	font-weight: 600;
	color: rgba(51, 51, 51, 1);
}
.mt10 {
	margin-top: 30px;
}
</style>
